<template>
  <view class="article-detail">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="goBack">
      <uni-icons type="back" size="24" color="#333333"></uni-icons>
    </view>

    <!-- 文章头部 -->
    <view class="article-header">
      <view class="article-title">{{ articleDetail.title }}</view>
      <view class="article-meta">
        <text class="meta-item">{{ formatDate(articleDetail.createTime) }}</text>
      </view>
    </view>

    <!-- 文章内容 -->
    <view class="article-content">
      <rich-text :nodes="articleDetail.content"></rich-text>
    </view>

    <!-- 文章图片 -->
    <view class="article-images" v-if="articleDetail.images && articleDetail.images.length">
      <image
        v-for="(image, index) in articleDetail.images"
        :key="index"
        :src="image"
        mode="widthFix"
        class="article-image"
        @tap="previewImage(image, articleDetail.images)"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import UserArticleApi from '@/sheep/api/article/user_article';
import { formatDate } from '@/sheep/util/date_util';

const articleDetail = ref({
  title: '',
  content: '',
  createTime: '',
  images: []
});

// 获取文章详情
const fetchArticleDetail = async (id) => {
  try {
    const response = await UserArticleApi.queryArticleDetail({ id });
    if (response.code === 0 && response.data) {
      articleDetail.value = response.data;
    }
  } catch (error) {
    console.error('获取文章详情失败:', error);
    uni.showToast({
      title: '获取文章详情失败',
      icon: 'none'
    });
  }
};

// 预览图片
const previewImage = (current, urls) => {
  uni.previewImage({
    current,
    urls,
    indicator: 'number'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const { id } = currentPage.$page.options;
  
  if (id) {
    fetchArticleDetail(id);
  }
});
</script>

<style lang="scss" scoped>
.article-detail {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 30rpx;
  position: relative;
}

.back-btn {
  position: fixed;
  top: 20rpx;
  left: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.article-header {
  margin-bottom: 40rpx;
  padding-top: 60rpx;
}

.article-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 20rpx;
  padding-right: 60rpx;
}

.article-meta {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 24rpx;
}

.meta-item {
  margin-right: 20rpx;
}

.article-content {
  font-size: 30rpx;
  color: #333333;
  line-height: 1.8;
  margin-bottom: 40rpx;
  
  :deep(img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20rpx 0;
    border-radius: 12rpx;
  }
}

.article-images {
  margin-top: 30rpx;
  width: 100%;
  overflow: hidden;
}

.article-image {
  width: 100%;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  display: block;
  max-width: 100%;
  height: auto;
}
</style> 